import { AddRoleApi, deleRole, getRoleApi, uplodRoleApi } from "@/api/role";
import { DeleteOutlined,  FormOutlined, PlusOutlined } from "@ant-design/icons";
import { ActionType, ModalForm, ProColumns, ProFormColorPicker, ProFormText, ProTable } from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Dropdown, Form, Space, Tag, message } from "antd";
import { useEffect, useRef, useState } from "react";
const RoleList = () => {
    type GithubIssueItem = {
        title:number,
        label:string,
        value:number,
        _id:string,
        color:string
    }
    const [form] = Form.useForm<{ label: string; value: string,color:string }>();
    const addUsers = useRequest(uplodRoleApi,{
        manual:true,
        onSuccess:(res)=>{
            console.log(res);
            actionRef.current?.reload()
        }
    })
    const deleUsers = useRequest(deleRole,{
        manual:true,
        onSuccess:(res)=>{
            console.log(res);
            
            actionRef.current?.reload()
        }
    })
      const columns: ProColumns<GithubIssueItem>[] = [
        {
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
            title:"序号"
          },
        {
          disable: true,
          title: '角色名称',
          dataIndex: 'label',
          onFilter: true,
          ellipsis: true,
          render:(_, record) => (
            <Space>
              <Tag color={record.color} >{record.label}</Tag>
            </Space>
          ),
        },
        {
            disable: true,
            title: '角色等级',
            dataIndex: 'value',
            search: false,
        },
        {
            disable: true,
            title: '角色ID',
            dataIndex: '_id',
            search: false,
            render:(_, record) => (
                <Space>
                  <Tag color="blue" >{record._id}</Tag>
                </Space>
              ),
        },
        {
            disable: true,
            title: '角色属性',
            dataIndex: 'color',
            search: false,
            render:(_,record)=>(
                <Space>
                <ProFormColorPicker
                    disabled
                    width="xs"
                    name={record._id}
                    value={record.color}
                />
                </Space>
            )
        },
        {
          title: '操作',
          valueType: 'option',
          key: 'option',
          render: (text, record:any, _, action) => [
            <div>
                <ModalForm<{
                label: string;
                  color:string
            }>
                title="新建角色"
                trigger={
                    <Button type="primary" danger shape="circle" icon={<FormOutlined />} size='middle' onClick={()=>form.setFieldsValue(record)} style={{marginRight:'10px'}}/>
                }
                width={300}
                form={form}
                onFinish={async (values) => {
                    addUsers.run(values.color,values.label,form.getFieldValue('_id'))
                    message.success('提交成功');
                    return true;
                }}
            >
                <ProFormText width="sm" name="label" label="角色名称" />
                <ProFormColorPicker
                    width="xs"
                    name="color"
                    label="选择颜色"
                    
                />
            </ModalForm>
                  
                    <Button type="primary" shape="circle" icon={<DeleteOutlined />} size='middle' onClick={()=>deleUsers.run(record._id)}/>
            </div>

          ],
        },
      ];
    const actionRef = useRef<ActionType>();
    return (
        <ProTable<GithubIssueItem>
            // dataSource={datas as GithubIssueItem[]}
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params = {}, sort, filter) => {
                console.log(params)

                let res:any = await getRoleApi(params.label)
                return {
                    data:res.result 
                } 
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="用户列表"
        />
    ); 
    
}

export default RoleList